<template>
  <div class="Pending_goods">
    <c-title :hide="false" :text="'待提商品'"></c-title>
    <div class="topBox">
      <div class="imgBox">
        <img :src="diyUrl('icon_commodity@2x (1).png')" alt="" />
      </div>
      <div class="topBox_txt">
        待提商品
        <div class="txt">{{ totalCount }}</div>
      </div>
    </div>
    <div class="goodsBox">
      <div class="goodsBox_txt">待提商品</div>
      <div class="list" v-for="item in list" :key="item.id">
        <div class="list_img">
          <img :src="item.thumb" alt="" />
        </div>
        <div class="list_r">
          <div class="list_r_title">{{ item.title }}</div>
          <div class="list_r_b">
            <div class="list_r_b_l">
              <div class="list_r_b_l_price">
                <div class="txt">提货价格:</div>
                {{ $i18n.t("money") }}{{ item.max_amount }}
              </div>
              <div class="list_r_b_l_price">
                <div class="txt">库存数量:</div>
                {{ item.stock }}
              </div>
            </div>
            <div class="list_r_b_btn" @click="mentioned_tap(item)">提货</div>
          </div>
        </div>
      </div>
    </div>
    <option_popup v-if="selectItem" :isPick_new="true" :showPopup="show" :item="selectItem" @pickUp_new="pickUpChild_popup" @closePopup="closePopup"></option_popup>
  </div>
</template>
<script>
import option_popup from "./components/optionPopup.vue";
import { scrollMixin } from "utils/mixin";
export default {
  mixins: [scrollMixin],
  data() {
    return {
      hostUrl: "",
      list: [],
      isLoadMore: true,
      totalCount: 0,
      page: 1,
      total_page: 0,
      selectItem: null,
      show: false,
    };
  },
  activated() {
    this.hostUrl = process.env.NODE_ENV == "development" ? "dev4.yunzmall.com" : window.location.host;
    this.init();
    this.getData();
    this.getPoint();
  },
  methods: {
    pickUpChild_popup(e) {
      let json = {
        new_auction_activity_id: e.id,
        new_auction_pick_num: e.value
      };
      console.log(json);
      this.$router.push(this.fun.getUrl("new_auction_order", json, { tag: "new_auction_mentioned" }));
      this.show = false;
      this.selectItem = null;
    },
    closePopup() {
      this.show = false;
    },
    async mentioned_tap(e) {
      if (e.stock == 0) {
        this.$toast("库存不足");
        return;
      }
      this.selectItem = e;
      this.show = true;
    },
    async getData() {
      let { data, msg, result } = await $http.post("plugin.new-auction.frontend.activity.activityGoodsList", {}, "");
      if (result) {
        this.list = data.data;
        this.isLoadMore = true;
        this.total_page = data.last_page;
      } else {
        this.isLoadMore = false;
        this.$toast(msg);
      }
    },
    async getPoint() {
      let { data, msg, result } = await $http.post("plugin.new-auction.frontend.activity.getPoint", {}, "");
      if (result) {
        this.totalCount = data.point;
      } else {
        this.$toast(msg);
      }
    },
    init() {
      this.page = 1;
      this.total_page = 0;
      this.isLoadMore = true;
      this.list = [];
    },
    async getMoreData() {
      if (!this.isLoadMore) return;
      this.isLoadMore = false;
      if (this.page >= this.total_page) {
        return;
      } else {
        this.page += 1;
        let json = {
          page: this.page
        };
        let { data, msg, result } = await $http.post("plugin.new-auction.frontend.activity.activityGoodsList", json, "");
        this.isLoadMore = true;
        if (result) {
          this.list = this.list.concat(data.data);
        } else {
          this.page = this.page - 1;
          this.isLoadMore = false;
          this.$toast(msg);
        }
      }
    }
  },
  computed: {
    diyUrl(url, key = true) {
      return function(url, key = true) {
        if (key) {
          return `https://${this.hostUrl}/plugins/new-auction/assets/image/${url}`;
        } else {
          return `url(https://${this.hostUrl}/plugins/new-auction/assets/image/${url})`;
        }
      };
    }
  },
  components: { option_popup }
};
</script>
<style lang="scss" scoped>
.Pending_goods {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.topBox {
  padding: 0.63rem 0.94rem;
  padding-bottom: 1.94rem;
  box-sizing: border-box;
  background: #fff;
  display: flex;
  align-items: center;
  .imgBox {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
  .topBox_txt {
    font-weight: bold;
    font-size: 1rem;
    margin-left: 0.94rem;
    .txt {
      margin-left: 0.75rem;
      display: inline-block;
    }
  }
}
.goodsBox {
  flex: 1;
  background: #ededed;
  border-radius: 1.25rem;
  margin-top: -1rem;
  padding: 0.94rem;
  padding-bottom: 2.94rem;
  .goodsBox_txt {
    font-size: 1rem;
    color: #000000;
    text-align: left;
    margin-bottom: 0.63rem;
  }
  .list {
    padding: 0.94rem;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 0.63rem;
    display: flex;
    margin-bottom: 0.94rem;
    .list_r {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .list_r_title {
        font-weight: bold;
        font-size: 0.88rem;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: left;
      }
      .list_r_b {
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        .list_r_b_btn {
          flex-shrink: 0;
          width: 4.69rem;
          height: 1.75rem;
          background: #126f46;
          border-radius: 0.84rem;
          text-align: center;
          line-height: 1.75rem;
          color: #fff;
        }
        .list_r_b_l {
          .list_r_b_l_price {
            display: flex;
            align-items: center;
            font-size: 0.81rem;
            color: #000000;
            line-height: 1.5rem;
            .txt {
              color: #6a6a6a;
              margin-right: 0.38rem;
            }
          }
        }
      }
    }
    .list_img {
      flex-shrink: 0;
      width: 5.63rem;
      height: 5.63rem;
      background: #ffffff;
      border-radius: 0.63rem;
      margin-right: 0.63rem;
      img {
        width: 100%;
        height: 100%;
        border-radius: 0.63rem;
      }
    }
  }
  .lsit:last-child {
    margin-bottom: 0;
  }
}
</style>
